<template>
  <div class="payment-result-container">
    <el-card class="result-card">
      <div class="result-icon failed">
        <el-icon><CircleClose /></el-icon>
      </div>
      <h2>支付失败</h2>
      <p class="error-message">{{ errorMessage }}</p>
      
      <div v-if="payment.orderId" class="order-info">
        <p>订单号：{{ payment.orderId }}</p>
        <p>失败时间：{{ formatDate(payment.failedAt) }}</p>
      </div>
      
      <div class="actions">
        <el-button type="primary" @click="retryPayment">重新支付</el-button>
        <el-button @click="goToRecharge">选择其他套餐</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { CircleClose } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'
import { getPaymentStatus } from '@/api/payment'

const route = useRoute()
const router = useRouter()
const payment = ref({
  orderId: route.query.orderId,
  failedAt: new Date()
})
const errorMessage = ref('支付过程中出现错误')

// 获取支付详情
const loadPayment = async () => {
  try {
    const res = await getPaymentStatus(route.query.orderId)
    payment.value = res.data
    errorMessage.value = res.data.error || '支付过程中出现错误'
  } catch (error) {
    console.error('获取支付详情失败:', error)
  }
}

// 格式化日期
const formatDate = (date) => {
  return new Date(date).toLocaleString()
}

// 重新支付
const retryPayment = () => {
  router.push(`/recharge?orderId=${payment.value.orderId}`)
}

// 跳转到充值页
const goToRecharge = () => {
  router.push('/recharge')
}

onMounted(() => {
  if (route.query.orderId) {
    loadPayment()
  }
})
</script>

<style scoped>
.payment-result-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.result-card {
  text-align: center;
  padding: 30px;
}

.result-icon {
  font-size: 60px;
  margin-bottom: 20px;
}

.result-icon.failed {
  color: var(--el-color-error);
}

.error-message {
  font-size: 16px;
  color: var(--el-text-color-regular);
  margin: 20px 0;
}

.order-info {
  background-color: var(--el-bg-color-page);
  padding: 15px;
  border-radius: 4px;
  margin: 20px 0;
  text-align: left;
}

.order-info p {
  margin: 8px 0;
  color: var(--el-text-color-secondary);
}

.actions {
  margin-top: 30px;
}
</style>